<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>Cocos Creator | chessGame</title>

  <!--http://www.html5rocks.com/en/mobile/mobifying/-->
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/>

  <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">

  <!-- force webkit on 360 -->
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- force edge on IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="msapplication-tap-highlight" content="no">

  <!-- force full screen on some browser -->
  <meta name="full-screen" content="yes"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>

  <!-- force screen orientation on some browser -->
  <meta name="screen-orientation" content="landscape"/>
  <meta name="x5-orientation" content="landscape">

  <!--fix fireball/issues/3568 -->
  <!--<meta name="browsermode" content="application">-->
  <meta name="x5-page-mode" content="app">

  <!--<link rel="apple-touch-icon" href=".png" />-->
  <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

  <link rel="stylesheet" type="text/css" href="style-mobile.css"/>
</head>
<body>
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
<script>
    var clientWidth = document.documentElement.clientWidth;
    var clientHeight = document.documentElement.clientHeight;
    var createStyle = function() {
        var cssStr = ".cocosLoading{position:relative;margin-left:"+(clientWidth/2-70).toString()+"px; margin-top:"+(clientHeight/2).toString()+"px;padding:0}" + ".cocosLoading ul{margin:0;padding:0;}"  + ".cocosLoading li{list-style:none;float:left;border-radius:15px;width:15px;height:15px;background:#FFF;margin:5px 0 0 10px}" + ".cocosLoading li .ball,.cocosLoading li .unball{background-color:#2187e7;background-image:-moz-linear-gradient(90deg,#2187e7 25%,#a0eaff);background-image:-webkit-linear-gradient(90deg,#2187e7 25%,#a0eaff);width:15px;height:15px;border-radius:50px}" + ".cocosLoading li .ball{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);animation:showDot 1s linear forwards;-moz-animation:showDot 1s linear forwards;-webkit-animation:showDot 1s linear forwards}" + ".cocosLoading li .unball{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);animation:hideDot 1s linear forwards;-moz-animation:hideDot 1s linear forwards;-webkit-animation:hideDot 1s linear forwards}" + "@keyframes showDot{0%{transform:scale(0,0)}100%{transform:scale(1,1)}}" + "@-moz-keyframes showDot{0%{-moz-transform:scale(0,0)}100%{-moz-transform:scale(1,1)}}" + "@-webkit-keyframes showDot{0%{-webkit-transform:scale(0,0)}100%{-webkit-transform:scale(1,1)}}" + "@keyframes hideDot{0%{transform:scale(1,1)}100%{transform:scale(0,0)}}" + "@-moz-keyframes hideDot{0%{-moz-transform:scale(1,1)}100%{-moz-transform:scale(0,0)}}" + "@-webkit-keyframes hideDot{0%{-webkit-transform:scale(1,1)}100%{-webkit-transform:scale(0,0)}}";
        return cssStr;
//            return ".cocosLoading{position:absolute;margin:0px -450px;padding:0;top:50%;left:50%}" + ".cocosLoading ul{margin:0;padding:0;}" + ".cocosLoading span{color:#FFF;text-align:center;display:block;}" + ".cocosLoading li{list-style:none;float:left;border-radius:15px;width:15px;height:15px;background:#FFF;margin:5px 0 0 10px}" + ".cocosLoading li .ball,.cocosLoading li .unball{background-color:#2187e7;background-image:-moz-linear-gradient(90deg,#2187e7 25%,#a0eaff);background-image:-webkit-linear-gradient(90deg,#2187e7 25%,#a0eaff);width:15px;height:15px;border-radius:50px}" + ".cocosLoading li .ball{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);animation:showDot 1s linear forwards;-moz-animation:showDot 1s linear forwards;-webkit-animation:showDot 1s linear forwards}" + ".cocosLoading li .unball{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);animation:hideDot 1s linear forwards;-moz-animation:hideDot 1s linear forwards;-webkit-animation:hideDot 1s linear forwards}" + "@keyframes showDot{0%{transform:scale(0,0)}100%{transform:scale(1,1)}}" + "@-moz-keyframes showDot{0%{-moz-transform:scale(0,0)}100%{-moz-transform:scale(1,1)}}" + "@-webkit-keyframes showDot{0%{-webkit-transform:scale(0,0)}100%{-webkit-transform:scale(1,1)}}" + "@keyframes hideDot{0%{transform:scale(1,1)}100%{transform:scale(0,0)}}" + "@-moz-keyframes hideDot{0%{-moz-transform:scale(1,1)}100%{-moz-transform:scale(0,0)}}" + "@-webkit-keyframes hideDot{0%{-webkit-transform:scale(1,1)}100%{-webkit-transform:scale(0,0)}}"

//            return ".cocosLoading{position:absolute;margin:-30px -60px;padding:0;top:50%;left:50%}" + ".cocosLoading ul{margin:0;padding:0;}" + ".cocosLoading span{color:#FFF;text-align:center;display:block;}" + ".cocosLoading li{list-style:none;float:left;border-radius:15px;width:15px;height:15px;background:#FFF;margin:5px 0 0 10px}" + ".cocosLoading li .ball,.cocosLoading li .unball{background-color:#2187e7;background-image:-moz-linear-gradient(90deg,#2187e7 25%,#a0eaff);background-image:-webkit-linear-gradient(90deg,#2187e7 25%,#a0eaff);width:15px;height:15px;border-radius:50px}" + ".cocosLoading li .ball{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);animation:showDot 1s linear forwards;-moz-animation:showDot 1s linear forwards;-webkit-animation:showDot 1s linear forwards}" + ".cocosLoading li .unball{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);animation:hideDot 1s linear forwards;-moz-animation:hideDot 1s linear forwards;-webkit-animation:hideDot 1s linear forwards}" + "@keyframes showDot{0%{transform:scale(0,0)}100%{transform:scale(1,1)}}" + "@-moz-keyframes showDot{0%{-moz-transform:scale(0,0)}100%{-moz-transform:scale(1,1)}}" + "@-webkit-keyframes showDot{0%{-webkit-transform:scale(0,0)}100%{-webkit-transform:scale(1,1)}}" + "@keyframes hideDot{0%{transform:scale(1,1)}100%{transform:scale(0,0)}}" + "@-moz-keyframes hideDot{0%{-moz-transform:scale(1,1)}100%{-moz-transform:scale(0,0)}}" + "@-webkit-keyframes hideDot{0%{-webkit-transform:scale(1,1)}100%{-webkit-transform:scale(0,0)}}"
    };
    var createDom = function(id, num) {
        id = id || "cocosLoading";
        num = num || 5;
        var i, item;
        var div = document.createElement("div");
        div.className = "cocosLoading";
        div.id = id;
        var bar = document.createElement("ul");
        var list = [];
        for (i = 0; i < num; i++) {
            item = document.createElement("li");
            list.push({
                ball: document.createElement("div"),
                halo: null
            });
            item.appendChild(list[list.length - 1].ball);
            bar.appendChild(item)
        }

        div.appendChild(bar);
        document.body.appendChild(div);
        var div1Style = "position:absolute;";
        div.style = div1Style;
        var span = document.createElement("span");
        span.innerHTML = "<font color=#ffffff>加载中...</font>";
        span.style = "color:#FFF;margin-left:25px;";
        div.appendChild(span);
        return list
    };
    var startAnimation = function(list, callback) {
        var index = 0;
        var direction = true;
        var time = 300;
        var animation = function() {
            setTimeout(function() {
                if (callback && !callback()) {
                    return
                }
                var item = list[index];
                if (direction) {
                    item.ball.className = "ball"
                } else {
                    item.ball.className = "unball"
                }
                index++;
                if (index >= list.length) {
                    direction = !direction;
                    index = 0;
                    time = 1000
                } else {
                    time = 300
                }
                animation()
            }, time)
        };
        animation()
    };
    var bgColor = document.body.style.background;
    document.body.style.background = "#000000";
    var style = document.createElement("style");
    style.type = "text/css";
    style.innerHTML = createStyle();
    document.head.appendChild(style);
    var list = createDom();
    startAnimation(list, function() {
        var div = document.getElementById("cocosLoading");
        if (!div) {
            document.body.style.background = bgColor
        }
        return !!div
    })
</script>
<script type="text/javascript"  src="http://img.gh.play.cn/h5/js/sdk.js"></script>
<script src="src/settings.js" charset="utf-8"></script>
<!--<script src="vconsole.min.js"></script>-->
<script src="main.js" charset="utf-8"></script>

<script type="text/javascript">
    (function () {
        // open web debugger console
        if (typeof VConsole !== 'undefined') {
            window.vConsole = new VConsole();
        }

        var cocos2d = document.createElement('script');
        cocos2d.async = true;
        cocos2d.src = window._CCSettings.debug ? 'cocos2d-js.js' : 'cocos2d-js-min.js';

        var engineLoaded = function () {
            document.body.removeChild(cocos2d);
            cocos2d.removeEventListener('load', engineLoaded, false);
            window.boot();
        }.bind(this);
        cocos2d.addEventListener('load', engineLoaded, false);
        document.body.appendChild(cocos2d);
        var request =
            {
                QueryString : function(val)
                {
                    var uri = window.location.search;
                    var re = new RegExp("" +val+ "=([^&?]*)", "ig");
                    return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);
                }
            }
        var token = request.QueryString("token");
        var urlDecode = decodeURIComponent(token);
        if (request.QueryString("extPara")) {
            var initeFriendData = decodeURIComponent(request.QueryString("extPara"));
        }
        window.initeFriendData = initeFriendData;
        window.token = urlDecode;
    })();
</script>
</body>
</html>
